<template>
  <div class="firstNav">
    <div class="nav-logo">
      <img :src="navData.logoSrc" alt />
      <label>{{ navData.itemName }}</label>
    </div>
    <div id="nav-box">
      <scroll-to
        :groupInfo="navData"
        @isAction="isAction"
        @channelJump="channelJump"
      ></scroll-to>
      <!-- <ul class="nav-list" ref="navList">
          <li
            v-for="(item, index) in navData.navList"
            :key="index"
            @click="channelJump(item)"
            :class="{ active: isAction(item) }"
          >
            <div class="navlist-item-text">
              <i v-if="item.icon" :class="item.icon" style="font-size: 16px"></i>
              <span>{{ item.navTitle }}</span>
              <div class="underline" v-if="isAction(item)"></div>
            </div>
          </li>
        </ul> -->
    </div>
  </div>
</template>
<script>
import scrollTo from "@/components/scrollTo";
export default {
  name: "firstNav",
  components: { scrollTo },
  props: {
    firstNav: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      briefingList: [], //我要展示的导航标题信息...
      showCount: 0,
      activeName: "", //this.navData.navList[0].navTitle,
      title: "系统名称",
      logoSrc: "",
      navData: {
        navList: [],
        activeChanel: "",
      },
    };
  },
  created() {
    this.init();
  },
  mounted() {},
  watch: {
    firstNav: {
      handler(val) {
        if (val) {
          this.init();
        }
      },
      deep: true,
    },
    "$route.path": {
      handler(val) {
        let strurl = val.match(/^(\/[\w]+)\/?/)[1];
        // this.$set(this.navData, "activeChanel", strurl);
        this.$set(this.navData, "activeChanel", this.$route.path);
      },
      deep: true,
    },
  },
  methods: {
    init() {
      let { title, logoSrc, navData } = this.firstNav;
      this.navData = Object.assign({}, this.navData, navData);
      this.title = title || this.title;
      this.logoSrc = logoSrc || this.logoSrc;
      // let strurl = this.$route.path.match(/^(\/[\w]+)\/?/)[1];
      // this.$set(this.navData, "activeChanel", strurl);
      this.$set(this.navData, "activeChanel", this.$route.path);
    },

    //导航点击
    channelJump(data) {
      /*
       * 以http开头的需要跳转
       *
       *router 以name跳转的params传参
       *router 以path跳转的query传参 (vue-router 定义)
       * */
      this.$emit("changeNav", data);
      if (data.hasOwnProperty("url")) {
        if (data.url !== "") {
          window.open(data.url, "_self");
          this.$set(this.navData, "activeChanel", data.url);
        }
      } else if (data.hasOwnProperty("name")) {
        if (data.name !== "") {
          if (data.hasOwnProperty("params")) {
            this.$router.push({ name: data.name, params: data.params });
          } else {
            this.$router.push({ name: data.name });
          }
          this.$set(this.navData, "activeChanel", data.name);
        }
      } else if (data.hasOwnProperty("path")) {
        if (data.path !== "") {
          if (data.hasOwnProperty("query")) {
            this.$router.push({ path: data.path, query: data.query });
          } else {
            this.$router.push({ path: data.path });
          }
          this.$set(this.navData, "activeChanel", data.path);
        }
      }
    },
    //判断是否启用
    isAction(item) {
      let routerPathArr = this.navData.activeChanel.split("/");
      if (routerPathArr.length > 2) {
        //当路由的有二级及一下菜单时
        let newArr = "/" + routerPathArr[1] + "/" + routerPathArr[2];
        return item.path == newArr || item.name == newArr || item.url == newArr;
      } else {
        return (
          item.path == this.navData.activeChanel ||
          item.name == this.navData.activeChanel ||
          item.url == this.navData.activeChanel
        );
      }
    },
  },
};
</script>
<style scoped lang="less">
.firstNav {
  display: flex;
  justify-content: space-between;
  /*align-items: center;*/
  height: @kr-first-nav-height;
  // color: #2c77f4;
  color: #333333;
  font-size: 16px;
  background-color: #ffffff;
  border-radius: @kr-bg-board-radius;
  /*background-color: #e1e1e1;*/
  /*background-color: #2C77F4;*/
}

.nav-logo {
  display: flex;
  align-items: center;
  /*height: 30px;*/
}

.nav-logo img {
  padding: 9px 12px 9px 20px;
  /*  padding-left: 10px;
    padding-right: 10px; */
  /* height: 100%; */
  height: 30px;
  width: 30px;
}

.nav-logo label {
  font-size: 18px;
  color: #333333;
  font-weight: bold;
  line-height: 100%;
  min-width: 120px;
  text-align: left;
}

#nav-box {
  flex-grow: 1;
  margin-left: 20px;
  //font-weight: 400;
  min-width: 950px;
}

#nav-box .nav-list {
  display: flex;
  height: 50px;
  line-height: 50px;
  //overflow-x: auto;
  /* white-space:nowrap; 
    text-overflow:ellipsis; */
}

#nav-box .nav-list > li {
  min-width: 90px;
  overflow: hidden;
  margin: 0 10px;
  cursor: pointer;
  font-size: 16px;
  text-align: center;
}

#nav-box .nav-list .active {
  font-weight: 500;
  color: #0d60b4;
  /* border-bottom: 4px solid #fff; */
}

#nav-box .nav-list :hover {
  color: #0d60b4;
  font-weight: 500;
}

#nav-box .nav-list .navlist-item-text {
  position: relative;
  display: inline-block;
}

#nav-box .nav-list .underline {
  height: 2px;
  width: 100%;
  /*background-color: #fff;*/
  background-color: #0d60b4;
  border-radius: 2px;
  position: absolute;
  /*bottom: -8px;*/
  bottom: 0px;
}
</style>
